<template>
  <div id="detailapplybox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表</el-button>
      <div class="applybody mt-20">
        <!--本体列表，数据 -->
        <div class="table-body">
          <div class="table-body-box">
            <el-table
                    ref="multipleTable"
                    :data="arryList"
                    :stripe="tableStyle.tableStripe"
                    :border="tableStyle.tableBorder"
                    tooltip-effect="dark"
                    style="width: 100%"
                    header-cell-class-name="table-text-c"
                    cell-class-name="table-text-c">
              <el-table-column
                      label="学生姓名"
                      prop="name">
              </el-table-column>
              <el-table-column
                      label="学生家长">
                <template slot-scope="scope">
                  <div class="parentsList" v-if="scope.row.parents.length!==0">
                    <p v-for="(item,index) in scope.row.parents" :key="index" class="curpointLine">{{item.name}}<span v-if="item.relation">({{item.relation}})</span></p>
                  </div>
                  <div v-else>
                    无数据…
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                      label="电话">
                <template slot-scope="scope">
                  <div class="parentsList" v-if="scope.row.parents.length!==0">
                    <p v-for="(item,index) in scope.row.parents" :key="index" class="curpointLine">{{item.mobile_phone}}</p>
                  </div>
                  <div v-else>
                    无数据
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                      label="状态">
                <template slot-scope="scope">
                  <div class="parentsList" v-if="scope.row.parents.length!==0">
                    <p v-for="(item,index) in scope.row.parents" :key="index"><span class="c-danger">未签收</span></p>
                  </div>
                  <div v-else>
                    无数据
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--工具条 分页-->
        <el-col :span="24" class="toolbar">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="page.total"
                  :page-size="page.pagesize"
                  @current-change="handleSizeChange">
          </el-pagination>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    data () {
      return {
        editId: this.$route.query,
        // 设置table样式
        tableStyle: tableoption,
        arryList: [],
        // 设置table页面分页所需
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        }
      }
    },
    created () {
      this.InitFn()
    },

    methods: {
      InitFn () {
        this.$fetch(api.admin_questionnaire_unread, {
          id: this.editId.id,
          p: this.page.pageindex,
          class_id: 0
        }).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      backlist () {
        this.$router.go(-1)
      },
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      }
    },
    mounted () {
    }
  }
</script>


